<template>
  <div>
    <div id="action_bar">
      <Button type="default" ghost class="common_button" @click="openAddDrawer">添加</Button>
      <Button type="default" ghost class="common_button" style="float: right">搜索</Button>
      <label>
        <Input v-model="keyword" placeholder="店铺名称" class="common_input" clearable></Input>
      </label>
      <label>
        <Select v-model="type" placeholder="全部类型" class="common_select">
          <Option v-for="item in type_list" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </label>
    </div>
    <div id="content_bar">
      <Table  v-model="taskData" :columns="taskColumns" />
      <div style="margin: 10px;overflow: hidden;margin-right: 0;">
        <div style="float: right;">
          <Page
            :total="pagination.total"
            :current="pagination.cuurent"
            :page-size="pagination.page_size"
            :show-total="pagination.show_total"
            @on-change="handleCurrentChange"
            v-if="pagination.total">
          </Page>
        </div>
      </div>
    </div>
    <Drawer :title="title" v-model="isOpen" width="500" :mask-closable="true">
      <Form :model="task" ref="taskForm" :label-width="80">
        <div class="drawer-footer">
          <Button type="primary" @click="cleanDrawer('taskForm')" style="margin-right: 8px;background-color: #c5c2c2;border-color: #fff;">取消</Button>
          <Button type="primary" @click="optionAction('taskForm')" class="sureButton" style="background-color: #E91E63;border-color: #fff;">确定</Button>
        </div>
      </Form>
    </Drawer>
  </div>
</template>

<script>
import Table from '../../mixins/table'
import Drawer from '../../mixins/drawer'
export default {
  mixins: [Table,Drawer],
  name: 'my_task',
  data () {
    return {
      keyword:'',
      type:'A',
      type_list:[
        {value:'A',label:'全部类型'},
        {value:'TB',label:'淘宝'},
        {value:'TM',label:'天猫'},
        {value:'JD',label:'京东'},
        {value:'PDD',label:'拼多多'}
      ],
      taskColumns:[
        { title: '店铺类型', key: 'type'},
        { title: '店铺名称', key: 'name'},
        { title: '任务类型', key: 'url'},
        { title: '商品名称', key: 'address'},
        { title: '商品规格', key: 'phone'},
        { title: '商品图片', key: 'people'},
        { title: '任务状态', key: 'people'},
        { title: '创建时间', key: 'people'},
        { title: '操作', key: 'people'}
      ],
      taskData:[],
      task:{}
    }
  },
  mounted () {
    this.doGetPage();
  },
  watch: {
    "pagination.current":function() {
      this.doGetPage();
    },
    "state":function(val) {
      this.doGetPage();
    }
  },
  methods:{
    doGetPage(){

    },
    search(){
      this.doGetPage();
    },
    openAddDrawer(){
      this.shop={};
      this.addDrawer("taskForm","添加任务");
    },
  }
}
</script>
<style>

</style>
